<template>
  <div
    :style="{ paddingTop: `${searchBarTop}px` }"
    class="healthDetail relative box-border h-screen px-34rpx">
    <div @click="goHealthBack">
      <div class="z-999 mb-16rpx flex items-center">
        <uni-icons type="back" size="28" />
      </div>
    </div>
    <div class="mb-56rpx mt-44rpx box-border flex justify-between">
      <div>
        <div class="font-alimamaShuHeiTi mb-16rpx w-234rpx text-40rpx font-600 text-hex-333333">先填写你的基本信息~</div>
        <div class="text-24rpx text-hex-7C8699">😊真实有效哦~</div>
      </div>
      <div>
        <image
          :src="`${cdnUrl}/imgs/healthProgramme/health.png${imgVersion}`"
          mode="scaleToFill"
          class="h-178rpx w-182rpx"
        />
      </div>
    </div>
    <!-- 姓名 -->
    <div class="mb-32rpx">
      <div class="relative mb-15rpx box-border h-120rpx w-100% flex items-center rounded-32rpx bg-hex-ffffff p-32rpx">
        <div class="absolute left-32rpx mr-70rpx text-28rpx text-hex-333333">姓名</div>
        <input v-model="name" type="text" placeholder-style="color:#C3C3C3"
               class="box-border h-58rpx w-100% pl-158rpx text-28rpx text-hex-7C8699"
               placeholder="请输入您的姓名" @input="nameInput" @blur="blurname">
      </div>
      <div v-if="nameshow" class="ml-20rpx text-20rpx text-hex-29B897">请输入您的姓名！</div>
    </div>
    <!-- 性别 -->
    <div class="mb-32rpx box-border h-120rpx w-100% flex items-center rounded-32rpx bg-hex-ffffff p-12rpx">
      <div class="h-100% w-100% flex items-center justify-around rounded-24rpx bg-hex-FAFAFA">
        <div
          v-for="item in sexList"
          :key="item.id"
          class="h-100% w-48% flex items-center justify-center text-28rpx text-hex-C4C4C4"
          :class="{ 'btn-theme-bg rounded-24rpx': item.id===sexoption }"
          @click="changeSexOption(item.id)"
        >
          <div>
            <image
              :src="item.imgurl"
              mode="scaleToFill"
              class="mr-32rpx h-60rpx w-60rpx"
            />
          </div>
          <div>{{ item.text }}</div>
        </div>
      </div>
    </div>
    <!-- 身高体重 -->
    <div class="mb-32rpx">
      <div class="mb-15rpx box-border h-120rpx w-100% flex items-center rounded-32rpx bg-hex-ffffff p-32rpx">
        <div class="relative w-48% flex items-center justify-center">
          <div class="absolute left-0 h-40rpx text-28rpx leading-40rpx text-hex-333333">身高</div>
          <input
            v-model="height" type="number"
            placeholder="00"
            placeholder-style="color:#C3C3C3"
            class="h-58rpx w-100% text-center text-28rpx text-hex-7C8699"
            maxlength="3"
            @input="heightInput" @blur="blurHeight">
          <div class="absolute right-0 h-40rpx text-28rpx leading-40rpx text-hex-7C8699">cm</div>
        </div>
        <div class="mx-32rpx h-30rpx w-2rpx bg-hex-D9D9D9" />
        <div class="relative w-48% flex items-center justify-center">
          <div class="absolute left-0 h-40rpx text-28rpx leading-40rpx text-hex-333333">体重</div>
          <input
            v-model="weight" placeholder="00"
            type="number"
            placeholder-style="color:#C3C3C3"
            class="h-58rpx w-100% text-center text-28rpx text-hex-7C8699"
            maxlength="3"
            @input="weightInput" @blur="blurWeight">
          <div class="absolute right-0 h-40rpx text-28rpx leading-40rpx text-hex-7C8699">kg</div>
        </div>
      </div>
      <div class="flex justify-between">
        <div v-show="heightShow" class="ml-20rpx text-20rpx text-hex-29B897">{{ heightText }}</div>
        <div v-show="weightShow" class="mr-20rpx text-20rpx text-hex-29B897">{{ weightText }}</div>
      </div>
    </div>
    <!-- 出生日期 -->
    <div class="mb-32rpx">
      <div class="mb-15rpx box-border h-120rpx w-100% flex items-center justify-between rounded-32rpx bg-hex-ffffff p-32rpx" @click="openpop">
        <div class="text-28rpx text-hex-333333">出生日期</div>
        <div class="text-28rpx text-hex-7C8699">{{ formatTime(date) }}</div>
        <div class="flex items-center justify-between">
          <image
            :src="`${cdnUrl}/imgs/healthDetail/day.png${imgVersion}`"
            mode="scaleToFill"
            class="h-40rpx w-40rpx"
          />
        </div>
      </div>
      <div v-if="dateShow" class="ml-20rpx text-20rpx text-hex-29B897">请选择您的出生日期！</div>
    </div>
    <div class="mt-200rpx flex items-center justify-center">
      <div
        v-if="!ispublish"
        class="h-76rpx w-330rpx flex items-center justify-center rounded-80rpx bg-[rgba(41,184,151,0.20)] text-28rpx text-hex-ffffff"
      >
        下一步
      </div>
      <div
        v-if="ispublish"
        class="btn-theme-bg h-76rpx w-330rpx flex items-center justify-center rounded-80rpx text-28rpx"
        @click="submitInfo"
      >
        下一步
      </div>
    </div>
    <uni-popup ref="popup" background-color="#fff" type="bottom" class="z-999">
      <Calendar @close="closepop" @datePickerConfirm="getdata" />
    </uni-popup>


    <confirm ref="confrimPop" />
  </div>
</template>

<script lang="ts" setup>
import dayjs from 'dayjs'
import utc from 'dayjs/plugin/utc'

let searchBarTop: any = $ref('24')
onLoad(() => {
  // #ifndef H5
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  searchBarTop = menuButtonInfo.top
  // #endif
})
let confrimPop: any = $ref()

const goback = () => {
  uni.navigateBack({
    delta: 1,
  })
}
const nameInput = () => {
  // console.log(name)
  // console.log(name.replace(/[^u4e00-u9fa5]/g, ''))

}
const heightInput = () => {
  if (height) {
    if (Number(height) > 240) {
      heightText = '请输入正确的身高！'
      height = 240
    } else {
      heightShow = false
    }
  }
  if (!nameshow && sexoption && !heightShow && !weightShow && date && height && weight && name) {
    ispublish = true
  } else {
    ispublish = false
  }
}
const weightInput = () => {
  if (weight) {
    if (Number(weight) > 300) {
      weightText = '请输入正确的体重！'
      weight = 300
    } else {
      weightShow = false
    }
  }
  if (!nameshow && sexoption && !heightShow && !weightShow && date && height && weight && name) {
    ispublish = true
  } else {
    ispublish = false
  }
}
let ispublish: any = $ref(false)

let popup: any = $ref(null)
const openpop = () => {
  popup.open('bottom')
}
const closepop = () => {
  popup.close()
}

let name: any = $ref('')//姓名
let sexoption: any = $ref('2')//男女选择
let height: any = $ref('')//身高
let weight: any = $ref('')//体重
let date: any = $ref('')//出生日期代码

let heightText: any = $ref('请输入您的身高！')
let weightText: any = $ref('请输入您的体重！')

const sexList = [
  { id: '2', text: '女', imgurl: `${cdnUrl}/imgs/healthDetail/girl.png${imgVersion}` },
  { id: '1', text: '男', imgurl: `${cdnUrl}/imgs/healthDetail/boy.png${imgVersion}` },
]
const changeSexOption = (index) => {
  sexoption = index
}

const blurname = () => {
  if (name) {
    nameshow = false
  }
  if (!nameshow && sexoption && !heightShow && !weightShow && date && height && weight && name) {
    ispublish = true
  } else {
    ispublish = false
  }
}
const blurHeight = () => {
  if (height) {
    if (Number(height) > 240) {
      heightText = '请输入正确的身高！'
      heightShow = true
    } else {
      heightShow = false
    }
  }
  if (!nameshow && sexoption && !heightShow && !weightShow && date && height && weight && name) {
    ispublish = true
  } else {
    ispublish = false
  }
}
const blurWeight = () => {
  if (weight) {
    if (Number(weight) > 300) {
      weightText = '请输入正确的体重！'
      weightShow = true
    } else {
      weightShow = false
    }
  }
  if (!nameshow && sexoption && !heightShow && !weightShow && date && height && weight && name) {
    ispublish = true
  } else {
    ispublish = false
  }
}

const getdata = (data) => {
  popup.close()
  date = `${data.nian}-${data.yue}-${data.ri}`
  if (!name) {
    nameshow = true
    return
  }
  if (!height) {
    heightShow = true
    return
  }
  if (!weight) {
    weightShow = true
    return
  }
  if (!date) {
    dateShow = true
    return
  }
  if (!nameshow && sexoption && !heightShow && !weightShow && date) {
    ispublish = true
  }
}

let nameshow: any = $ref(false)
let heightShow: any = $ref(false)
let weightShow: any = $ref(false)
let dateShow: any = $ref(false)

const submitInfo = async () => {
  const pageParams = {
    name,
    sex: sexoption,
    height,
    weight,
    birthday: formatTime(date),
  }
  const params = encodeURIComponent(JSON.stringify(pageParams))
  navTo(`/pages-health/healthQuestion?params=${params}`)
}

let evaluationsId: any = $ref('')
const getEvaluationsList = async () => {
  const reqData = {
    method: 'post',
    headers: { timestamp: Date.now() },
  }
  const { status, data } = await Fetch('/api/s/health/evaluations', reqData)
  if (status !== 200 || data.code !== 0) {
    return
  }
  if (data.result.dataList && data.result.dataList.length > 0) {
    evaluationsId = data.result.dataList[0]?.id
    getHealthInfo()
  }
}

const getHealthInfo = async () => {
  const reqData = {
    method: 'post',
    headers: { timestamp: Date.now() },
    data: {
      'evaluation_id': evaluationsId.toString(),
    },
  }
  const { status, data } = await Fetch('/api/s/health/infos/get', reqData)
  if (status !== 200 || data.code !== 0) {
    return
  }
  const item = data.result.dataList[0]
  name = item.name
  sexoption = item.sex.toString()
  height = Number(item.height).toFixed(0)
  weight = Number(item.weight).toFixed(0)
  date = item.birthday
  ispublish = true
}

const formatTime = (date) => {
  dayjs.extend(utc)
  if (!date) {
    return
  }
  return dayjs(date).utc().local().format('YYYY-MM-DD')
}
onMounted(() => {
  // confrimPop.showConfirm('是否继续答题', { sure: '是', cancle: '否' }).then(res => {
  //   if (res) {
  //     console.log(res)
  //   } else {
  //     console.log(res)
  //   }
  // })
  getEvaluationsList()
})
</script>

<style lang="scss">

.healthDetail{
  background: url('https://qqy-1254346585.cos.ap-nanjing.myqcloud.com/qqy/imgs/noOpen/bg.png') no-repeat center;
  background-size: 100%;

  .font-alimamaShuHeiTi{
    font-family:alimamaShuHeiTi;
  }
}
</style>
